import { Snippet } from '@/types';
import Link from 'next/link';

interface SnippetCardProps {
  snippet: Snippet;
}

export const SnippetCard = ({ snippet }: SnippetCardProps) => {
  return (
    <div className="bg-white dark:bg-gray-950 rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <div className="p-6">
        <h3 className="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-50">{snippet.title}</h3>
        <p className="text-gray-600 dark:text-gray-400 mb-4 truncate">{snippet.content}</p>
        <div className="flex flex-wrap gap-2 mb-4">
          {snippet.tags.map(tag => (
            <Link key={tag.id} href={`/?tag=${tag.name}`} prefetch={false}>
              <span className="bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 px-2 py-1 rounded-full text-sm font-medium">{tag.name}</span>
            </Link>
          ))}
        </div>
        <Link
          href={`/snippets/${snippet.id}`}
          className="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 font-medium"
          prefetch={false}
        >
          View Snippet
        </Link>
      </div>
    </div>
  );
};